<template>
	<div class="ziu">
	<div class="titt">
		请认真填写就诊人信息
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">关系</div>
		<div class="oi" style="display: flex;justify-content: space-between;" @click='change'>
			<div style="font-size: 14px;"><input type="text" name="" id="" v-model="guanx" placeholder="请选择与本人的关系" disabled="true" style="line-height: 55px;height: 55px;"></div>
			<div><img src="@/static/addmore.png" alt="" style="width: 12px;height: 12px;"></div>
		</div>
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">姓名</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
		<input type="text" name="" id="" placeholder="请输入真实姓名" style="line-height: 55px;height: 55px;" v-model="name">
		</div>
	</div>
	<div class="titt" style="display: flex;" @click='typerlsk'>
		<div class="oi" style="font-size: 15px;color: #333333;">证件类型</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
			<div style="font-size: 14px;"><input type="text" name="" id="" placeholder="请选择证件类型" disabled="true" style="line-height: 55px;height: 55px;" v-model="type"></div>
			<div><img src="@/static/addmore.png" alt="" style="width: 12px;height: 12px;"></div>
		</div>
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">证件号码</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
		<input type="text" name="" id="" placeholder="请输入证件号码" style="line-height: 55px;height: 55px;" v-model="number">
		</div>
	</div>	
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">就诊卡号</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
		<input type="text" name="" id="" placeholder="请输入就诊卡号" style="line-height: 55px;height: 55px;" v-model="numcar">
		</div>
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">就诊人号码</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
		<input type="text" name="" id="" placeholder="请输入手机号码" style="line-height: 55px;height: 55px;" v-model="phone">
		</div>
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">就诊人地址</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
				<input type="text" name="" id="" placeholder="选填" style="line-height: 55px;height: 55px;" v-model="address">
		</div>
	</div>
	<div class="titt" style="display: flex;">
		<div class="oi" style="font-size: 15px;color: #333333;">设置默认就诊人</div>
		<div class="oi" style="display: flex;justify-content: space-between;">
			<div style="font-size: 14px;"></div>
			<div>			<view>
				<switch checked @change="switch1Change" style="transform:scale(0.7)"/>
			</view></div>
		</div>
	</div>
	<div style="background-color: #f7f7f8;color: #d3d3d4;padding: 10px;font-size: 12px;">
		初次添加就诊人请绑定本院就诊卡号，未持有本院就诊卡的患者需到本院自助机或窗口办理就诊卡后方可进行添加。
	</div>
	<div>
		<button style="background-color: #006eff;color: #ffff;margin-top: 15px;" @click="addhsoper">保存</button>
	</div>
	<view style="width: 100%;height: 400px;position: fixed;background-color: #ffffff;margin-left: -15px;bottom: -400px;z-index: 889;" :animation="animationData">
		<div style="position: absolute; top: 7%;right: 10%;"><img src="@/static/icon-close.png" alt="" style="width: 15px;height: 15px;" @click='close'></div>
		<div style="width: 100%;text-align: center;font-size: 17px;margin-top: 25px;">选择与本人关系</div>
		<div class="zkj" @click='choose(0)'>本人</div>
		<div class="zkj" @click='choose(1)'>子女</div>
		<div class="zkj" @click='choose(2)'>夫妻</div>
		<div class="zkj" @click='choose(3)'>父母</div>
		<div class="zkj" @click='choose(4)'>朋友</div>
	</view>
	<view style="width: 100%;height: 300px;position: fixed;background-color: #ffffff;margin-left: -15px;bottom: -300px;z-index: 889;" :animation="animationData1">
		<div style="position: absolute; top: 7%;right: 10%;"><img src="@/static/icon-close.png" alt="" style="width: 15px;height: 15px;" @click='close1'></div>
		<div style="width: 100%;text-align: center;font-size: 17px;margin-top: 25px;">选择证件类型</div>
		<div class="zkj" @click='choose1(0)'>身份证</div>
		<div class="zkj" @click='choose1(1)'>护照</div>
		<div class="zkj" @click='choose1(2)'>港澳通行证</div>
	</view>
		<div style="width: 100%;padding: 100%;position: fixed;background-color: #666666;z-index: 888;top: 0;margin-left: -15px;opacity: .5;" v-show="show" @click='disnone'></div>
	</div>
</template>

<script>
		export default{
			data(){
				return{
					animationData1:{},
									animationData: {},
									guanx:'',
									type:'',
									name:'',
									number:'',
									numcar:'',
									phone:'',
									address:''
				}
			},methods:{
				addhsoper(){
				uni.showToast({
					title:'保存成功',
					duration:2000
				})
					setTimeout(()=>{
						uni.navigateBack()
					},2000)
				},
				typerlsk(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-301).step()
					
					    this.animationData1 = animation.export()
						this.show=true
				},
				switch1Change: function (e) {
				    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				},close(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(0).step()
					
					    this.animationData = animation.export()
						this.show=false
				},close1(){
				console.log(1)
				    var animation = uni.createAnimation({
				      duration: 1000,
				        timingFunction: 'ease',
				    })
				
				    this.animation = animation
				
				    animation.translateY(0).step()
				
				    this.animationData1 = animation.export()
					this.show=false	
				},choose1(index){
					if(index==0){
						this.type='身份证'
					}else if(index==1){
						this.type='护照'
					}else if(index==2){
						this.type='港澳通行证'
					}
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData1 = animation.export()
					this.show=false
				},choose(index){
					if(index==0){
						this.guanx='本人'
					}else if(index==1){
						this.guanx='子女'
					}else if(index==2){
						this.guanx='夫妻'
					}else if(index==3){
						this.guanx='父母'
					}else if(index==4){
						this.guanx='朋友'
					}
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData = animation.export()
					this.show=false
				},
				physicalexaminationreport(){
					uni.navigateTo({
						url:'./physicalexaminationreport'
					})
				},change(){
					console.log(1)
					    var animation = uni.createAnimation({
					      duration: 1000,
					        timingFunction: 'ease',
					    })
					
					    this.animation = animation
					
					    animation.translateY(-401).step()
					
					    this.animationData = animation.export()
						this.show=true
				},disnone(){
					var animation = uni.createAnimation({
					  duration: 1000,
					    timingFunction: 'ease',
					})
										
					this.animation = animation
										
					animation.translateY(-1).step()
										
					this.animationData = animation.export()
					this.show=false
				}
			}
		}
</script>

<style>
	.zkj{
		height: 55px;
		line-height: 55px;
		text-align: center;
		border-bottom: 1px solid #f2f2f2;
		padding: 5px;
	}
	.oi:nth-child(1){
		flex: 1;
	}
	.oi:nth-child(2){
		flex: 2;
	}
	.titt{
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    color: #AAAAAA;
			font-size: 14px;
			height: 55px;
			line-height: 55px;
			border-bottom: 1px solid #f2f2f2;
	}
	.ziu{
		padding: 15px;
	}
</style>